﻿<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/materialdesignicons.min.css" rel="stylesheet">
    <link href="css/style.min.css" rel="stylesheet">
    <link href="js/bootstraptable/bootstrap-table.min.css" rel="stylesheet">
    <link href="js/easyhelper/easyhelper.min.css" rel="stylesheet" />
    <link href="css/bootstrapStyle.css" rel="stylesheet" />
    <script src="js/vue.min.js"></script>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script src="js/popper.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
</head>

<body>
    <div class="container-fluid p-t-15" id="page">
        <div class="row">
            <div class="col-sm-12 col-md-12">
                <div class="card">
                    <div class="card-header">
                        <button info>添加</button>
                    </div>
                    <div class="card-body">
                        <table id="tb_departments"></table>
                    </div>
                </div>
            </div>
        </div>
    </div>





    <script type="text/javascript" src="js/bootstraptable/bootstrap-table.js"></script>
    <script type="text/javascript" src="js/bootstraptable/bootstrap-table-zh-CN.min.js"></script>
    <script src="js/easyhelper/easyhelper.min.js"></script>
    <script type="text/javascript" src="js/main.min.js"></script>

    <script type="text/javascript">
        var departments;
        $(function () {
            $('button[info]').on('click', function () {
                Helper.ui.dialog({
                    title: "添加模版", buttonNoClose: [true, false],
                    content: `<div class="form-group has-info">
                                                                  <label class="col-xs-12" for="example-text-input-info">模版名称</label>
                                                                  <div class="col-xs-12">
                                                                    <input class="form-control" type="text" name="templatesName" placeholder="模版名称..">
                                                                  </div>
                                                                </div> `, yes: {
                        callback: function () {
                            var value = $('input[name="templatesName"]').val();
                            if (value === '') {
                                Helper.ui.message.error("模版名称不能为空", {});
                                $('input[name="templatesName"]').focus(); return;
                            }
                            Helper.ui.loading(".helper-dialog-wrapper", { text: "请稍后...." });
                            AddTemplates(value);
                            Helper.ui.removeLoading(".helper-dialog-wrapper");
                            Helper.ui.message.success("增加成功", {});
                            departments.bootstrapTable('load', page.Data);
                            Helper.ui.removeDialog();
                            $('[data-toggle="tooltip"]').tooltip();
                        }
                    }
                });
            })
            departments = $('#tb_departments').bootstrapTable({
                classes: 'table table-bordered table-hover table-striped',
                uniqueId: 'Id',
                idField: 'Id',             // 每行的唯一标识字段
                data: page.Data,
                columns: [{
                    field: 'Title',
                    title: '模版名称'
                }, {
                    field: 'AddTime',
                    title: '添加时间',
                }, {
                    field: 'EditTime',
                    title: '修改时间',
                }, {
                    field: 'operate',
                        title: '操作',
                    width:220,
                    formatter: btnGroup,  // 自定义方法
                    events: {
                        'click .temp-edit': function (event, value, row, index) {
                            parent.$(parent.document).data('multitabs').create({
                                iframe: true,
                                title: row.Title,
                                url: `editCode.html?id=${row.Id}`
                            }, true);
                        },
                        'click .temp-delete': function (event, value, row, index) {
                            delTemplate(row.Id);
                        },
                        'click .temp-cloud': function (event, value, row, index) {

                            Helper.ui.message.success("功能开发中");
                        }
                    }
                }]
            });
            $('[data-toggle="tooltip"]').tooltip();
        });


        // 操作按钮
        function btnGroup() {
            return [
                '<a type="button" class="temp-edit btn btn-xs btn-info m-r-5" title="编辑代码" data-toggle="tooltip"><i class="mdi mdi-pencil"></i>编辑</a>',
                '<a type="button" class="temp-delete btn btn-xs btn-danger" title="删除" data-toggle="tooltip"><i class="mdi mdi-cloud-upload"></i>删除</a> ',
                '<a type="button" class="temp-cloud btn btn-xs btn-primary" title="上传到云端" data-toggle="tooltip"><i class="mdi mdi-cloud-upload"></i>上传</a>'
            ].join('');
        }
    </script>

</body>
</html>